<template>
    <div>
      <div
        style="width: 100px;height:100px"
        v-loading="true"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.3)"
      ></div>
        <button @click="cropperVisible = true">点击</button>
        <el-dialog
                width="1300px"
                :footer="null"
                :visible.sync="cropperVisible"
                :before-close="handleClose"
            >
            <CropperImage :show-input-img="true" :show-upload-img="true" :datas="currCropperFace" :visible="cropperVisible" ref="child"></CropperImage>
        </el-dialog>
    </div>

</template>

<script>
import imgPosition from './imgPosition'
export default {
    name:'imgBox',
    components:{'CropperImage':imgPosition},
    data(){
        return {
            cropperVisible:false,
            currCropperFace:{
            logoList:[
              {
               url:'',
               topy:100,
               topx:200,
               width:100,
               height:200,
               devChnId:123,
               alpha:50,
               ratio:0,
              }
            ],
            "id": 20,
            "deviceId": 1,
            "channelId": 19,
            "channelNo": null,
            "status": 2,
            "type": 0,
            "action": 0,
            "running": 0,
            "pid": 0,
            "log": "",
            "cardno": 0,
            "portno": null,
            "fps": 25,
            "audiotype": 2,
            "networkid": 121,
            "tsid": 123,
            "serviceid": 124,
            "pmtpid": 125,
            "videopid": 126,
            "volume": 1.4,
            "vcodec": "H264",
            "vbitrate": 6000,
            "acodec": "AAC",
            "vprofile": "MAIN",
            "gop": 1,
            "bf": 2,
            "aspectratio": 0,
            "abitrate": 192,
            "samplerate": null,
            "bitrate": "8000",
            "outlive": "238.1.1.101,8001,192.168.6.101",
            "delay": null,
            "outdelay": "",
            "outurl": "",
            "outport": null,
            "localaddr": null,
            "firprodevid": 0,
            "lastprodevid": null,
            "deleteId": 0,
            "createTime": "2023-09-20T15:28:35",
            "updateTime": "2023-11-17T17:59:30",
            "width": "",
            "height": "",
            "servicename": "冰雪体育",
            "providername": "zght",
            "statusstr": "可播放",
            "device": {
                "id": 1,
                "ip": "192.168.6.101",
                "name": "101-主",
                "devips": "192.168.6.101",
                "inputips": "192.168.6.101",
                "mediapath": "/storage/device101",
                "sdinum": "1",
                "spacetotal": 15140230,
                "spaceavail": 10335442,
                "heartbeat": 1700532195,
                "status": 1,
                "deleteId": 0,
                "createTime": "2023-07-24T14:05:06",
                "updateTime": "2023-11-21T10:03:15",
                "statusstr": "正常"
            },
            "channel": {
                "id": 19,
                "no": 101,
                "type": 0,
                "name": "冰雪体育-测试",
                "showname": "冰雪体育-测试",
                "defaultts": "冰雪频道宣传mv.ts",
                "videores": "1080P",
                "emergency": 0,
                "log": "",
                "height": 1080,
                "width": 1920,
                "supportedformat": "TS",
                "recordId": 0,
                "defaultrecordId": 70,
                "status": 0,
                "deleteId": 0,
                "createTime": "2023-09-11T14:32:18",
                "updateTime": "2023-1"
            }
            }
        }
    },

    methods:{
        handleClose(){
            this.cropperVisible = false
        }
    },

    watch:{},
    computed:{},

    created(){},
    mounted(){},
    beforeDestroy(){}

}

</script>

<style scoped lang="less">


</style>